<script setup lang="ts">
import qrCodeForWechatOfficial from '@/assets/qrcode_for_wechat_official.jpg'
import qrCodeForWechatPersonal from '@/assets/qrcode_for_wechat_personal.jpg'
import { onBeforeMount, ref } from 'vue'
import { backendService, ResponseCode } from '@/service/BackendService'

const version = ref('')

const config = ref({
  syncer: '',
  sync: {
    paths: [],
    interval: NaN,
    excludes: []
  },
  http: {
    addr: '',
    port: NaN,
    username: '',
    sessionTimeout: NaN
  },
  db: {
    driver: '',
    dataSource: ''
  }
})

const syncStats = ref({
  last24hCount: NaN,
  last24hFailedCount: NaN,
  totalCount: NaN,
  totalFailedCount: NaN
})

interface SyncerNameMapping {
  [key: string]: string
}

const syncerName: SyncerNameMapping = {
  oss: '阿里云OSS',
  s3: '亚马逊云S3'
}

const syncConfigData = ref([
  {
    key: 'syncer',
    name: '同步服务'
  },
  {
    key: 'sync.interval',
    name: '频率(秒)'
  },
  {
    key: 'sync.paths',
    name: '目录'
  },
  {
    key: 'sync.excludes',
    name: '排除文件'
  }
])

const httpConfigData = ref([
  {
    key: 'bind',
    name: '绑定'
  },
  {
    key: 'username',
    name: '登录名'
  },
  {
    key: 'sessionTimeout',
    name: 'Session超长(秒)'
  }
])

const dbConfigData = ref([
  {
    key: 'driver',
    name: '类型'
  },
  {
    key: 'dataSource',
    name: '数据源'
  }
])

const projectData = ref([
  {
    key: 'description',
    name: '软件简介',
    value: '一款自动将本地文件同步到远程存储的工具'
  },
  {
    key: 'version',
    name: '软件版本',
    value: ''
  },
  {
    key: 'wechatOfficial',
    name: '微信公众'
  },
  {
    key: 'wechatPersonal',
    name: '个人微信'
  },
  {
    key: 'gitee',
    name: '码云',
    value: 'https://gitee.com/xiyoufang/cloud-syncer'
  },
  {
    key: 'github',
    name: 'Github',
    value: 'https://github.com/xiyoufang/cloud-syncer'
  },
  {
    key: 'website',
    name: '个人网站',
    value: 'https://www.xiyoufang.com'
  }
])

onBeforeMount(() => {
  backendService
    .post('/api/overview', {})
    .then((response) => {
      let data = response.data
      if (data.code === ResponseCode.OK) {
        version.value = data.data.version
        config.value = data.data.config
        syncStats.value = data.data.syncStats
      }
    })
    .catch((error: any) => {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
        dangerouslyUseHTMLString: true
      })
    })
    .finally(() => {})
})
</script>

<template>
  <div class="home">
    <el-card shadow="hover">
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="syncStats.last24hCount">
              <template #title> 最近24小时同步数量</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="syncStats.last24hFailedCount">
              <template #title> 最近24小时失败数量</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="syncStats.totalCount">
              <template #title> 累计同步数量</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="syncStats.totalFailedCount">
              <template #title> 累计失败次数量</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-divider></el-divider>
    <el-row :gutter="16">
      <el-col :span="16">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <h3>同步配置</h3>
            </div>
          </template>
          <el-table :data="syncConfigData" :show-header="false" :stripe="false">
            <el-table-column prop="name" label="Name" width="160" />
            <el-table-column prop="value" label="Value">
              <template #default="scope">
                <div v-if="scope.row.key == 'syncer'">
                  {{ syncerName[config.syncer] }}
                </div>
                <div v-else-if="scope.row.key == 'sync.interval'">
                  {{ config.sync.interval }}
                </div>
                <div v-else-if="scope.row.key == 'sync.paths'">
                  <el-table
                    style="width: 100%"
                    :data="config.sync.paths"
                    :show-header="false"
                    :stripe="false"
                  >
                    <el-table-column prop="local" label="本地" />
                    <el-table-column prop="remote" label="远程" />
                  </el-table>
                </div>
                <div v-else-if="scope.row.key == 'sync.excludes'">
                  {{ config.sync.excludes.join(', ') }}
                </div>
                <div v-else>{{ scope.row.value }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-divider></el-divider>
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <h3>网站配置</h3>
            </div>
          </template>
          <el-table :data="httpConfigData" :show-header="false" :stripe="false">
            <el-table-column prop="name" label="Name" width="160" />
            <el-table-column prop="value" label="Value">
              <template #default="scope">
                <div v-if="scope.row.key == 'bind'">
                  {{ config.http.addr }}:{{ config.http.port }}
                </div>
                <div v-else-if="scope.row.key == 'username'">
                  {{ config.http.username }}
                </div>
                <div v-else-if="scope.row.key == 'sessionTimeout'">
                  {{ config.http.sessionTimeout }}
                </div>
                <div v-else>{{ scope.row.value }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-divider></el-divider>
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <h3>数据库配置</h3>
            </div>
          </template>
          <el-table :data="dbConfigData" :show-header="false" :stripe="false">
            <el-table-column prop="name" label="Name" width="160" />
            <el-table-column prop="value" label="Value">
              <template #default="scope">
                <div v-if="scope.row.key == 'driver'">
                  {{ config.db.driver }}
                </div>
                <div v-else-if="scope.row.key == 'dataSource'">
                  {{ config.db.dataSource }}
                </div>
                <div v-else>{{ scope.row.value }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>项目信息</h3>
            </div>
          </template>
          <el-table :data="projectData" :show-header="false" :stripe="false" style="width: 100%">
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="value" label="Value">
              <template #default="scope">
                <div v-if="scope.row.key == 'version'">
                  <el-tag>{{ version }}</el-tag>
                </div>
                <div v-else-if="scope.row.key == 'wechatOfficial'">
                  <el-image style="width: 160px" :src="qrCodeForWechatOfficial" />
                  <div>微信搜一搜"开源螺丝钉"公众号</div>
                </div>
                <div v-else-if="scope.row.key == 'wechatPersonal'">
                  <el-image style="width: 160px" :src="qrCodeForWechatPersonal" />
                  <div>微信扫一扫, 一起交流</div>
                </div>
                <div v-else-if="['website', 'github', 'gitee'].indexOf(scope.row.key) !== -1">
                  <el-link :href="scope.row.value" target="_blank"> {{ scope.row.value }}</el-link>
                </div>
                <div v-else>
                  {{ scope.row.value }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
